<template>
  <view class="box">
    <uv-navbar placeholder title="创意详情" :autoBack="true"></uv-navbar>
    <view class="swiper-box">
      <uv-swiper :list="detailsData.slider_image" height="873rpx" indicator indicatorMode="dot"></uv-swiper>
    </view>
    <view class="p-x-32">
      <view class="font-36 font-weight-bold m-t-36">
        {{ detailsData.title }}
      </view>
      <view class="flex align-ali justify-bet m-t-20">
        <view class="font-32 text-840202 font-w-b">
          {{ detailsData.user_name || '--' }}
        </view>
        <view class="flex align-ali m-t-16 p-x-22 iconNumber">
          <!-- <view>
         	    <uv-image width="28rpx" height="28rpx" :src="ASSETSURL + 'borrow.png'"></uv-image>
         	  </view> -->
          <view class="font-28 font-weight-bold m-l-10">{{ detailsData.reference_num || 0 }}</view>
          <view class="font-24 text-greey m-l-10">人借鉴</view>
        </view>
      </view>
      <view class="font-26 text-greey m-t-18">
        {{ detailsData.brief }}
      </view>
      <view class="m-t-36">
        <uv-parse :content="detailsData.description"></uv-parse>
      </view>
    </view>
    <!-- 底部-->
    <view class="fbom fixed-bottom flex align-ali p-x-26 p-y-16 border-top">
      <button open-type="contact" class="button" hover-class="none">
        <view class="flex align-ali flex-col justify-cen clothesCart">
          <view>
            <uv-image width="42rpx" height="42rpx" :src="ASSETSURL + `clothes.png`"></uv-image>
          </view>
          <view class="m-t-6 font-22" style="line-height: normal">客服</view>
        </view>
      </button>
      <!-- <view class="m-l-30 immediatelyBtn font-32 flex align-ali justify-cen text-white" @click="getAddReference">创意借鉴
      </view> -->
      <view class="m-l-30">
        <dy-button width="568rpx" @click="getAddReference">创意借鉴</dy-button>
      </view>

      <dy-login ref="login"></dy-login>
    </view>
    <alreadyCapped ref="alreadyCappeds"></alreadyCapped>

  </view>
</template>

<script setup>
import { getOriginalityDetail, addReference, deleteReference } from '@/api/api.js';
import { ref, onMounted, reactive } from 'vue';
import { useStore } from 'vuex';
import { onReachBottom, onShow, onReady, onLoad } from '@dcloudio/uni-app';
import { os, sys } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { useCounter } from '@/mixins/userHooks.js';
const { getUserInfo, userInfo, tool } = useCounter();
const alreadyCappeds = ref(null);
const login = ref(null);
const formData = reactive({
  id: null //创意id
});
const detailsData = ref({});
//详情
const getOriginalityDetails = () => {
  getOriginalityDetail({ id: formData.id }).then((res) => {
    console.log(res, '创意详情');
    detailsData.value = res.data;
  });
};
//创意借鉴
const getAddReference = () => {
  if (!tool.storage('userInfo').mobile) return login.value.open()
  if (userInfo.value.my_diy < 10) {
    addReference({ id: detailsData.value.id }).then((res) => {
      console.log(res, '创意借鉴');
      uni.navigateTo({
        url: '/packageDiy/customized/customized?jj_id=' + detailsData.value.id
      });
    });
  } else {
    alreadyCappeds.value.open();
  }
};
//取消创意借鉴
const getDeleteReference = () => {
  deleteReference({ id: detailsData.value.id }).then((res) => {
    console.log(res, '创意借鉴');
  });
};
onLoad((ope) => {
  if (ope.id) {
    formData.id = ope.id;
    console.log(formData, 'onLoad');
    getOriginalityDetails();
  }
});
</script>

<style lang="scss" scoped>
.box {
  padding-bottom: 210rpx;
  box-sizing: border-box;
}

.swiper-box {
  overflow: hidden;
}

.fbom {
  width: 100vw;
  height: 130rpx;
  background: #fff;
  border-color: #d9d9d9 !important;

  .clothesCart {
    width: 100rpx;
  }

  .immediatelyBtn {
    width: 568rpx;
    height: 88rpx;
    background: #830102;
    border-radius: 12rpx;
  }
}

.clothesCart {
  width: 100rpx;
}
</style>
